<script setup lang="ts">
import { computed, ref, watch } from 'vue'

// 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}
// 6-1.数据持久化 存储初始值
const initFruitArr = ref<Fruit[]>([
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: false,
    num: 20,
    price: 34
  }
])

// 水果列表
let fruitList = initFruitArr
// 判断当水果列表不为null和[]时才会读取本地存储的列表，如果没有数据会重新加载列表而不是加载本地存的
// 获取本地数据  如果有本地数据 则加载本地的
if (localStorage.getItem('FruitCar') !== null && localStorage.getItem('FruitCar') !== '[]') {
  fruitList = ref(JSON.parse(localStorage.getItem('FruitCar') as string))
}

// 1，删除商品
const del = (id: number) => {
  fruitList.value = fruitList.value.filter((item) => item.id !== id)
}
// 2，加商品
const add = (id: number) => {
  const fruit = fruitList.value.find((item) => item.id === id)
  fruit && fruit.num++
}
// 3.减商品
const sub = (id: number) => {
  const fruit = fruitList.value.find((item) => item.id === id)
  fruit && fruit.num--
}
// 4.全选和取消全选  计算属性：依赖数据的变化，自动重新计算
const checkAll = computed({
  // 取计算属性的值
  get() {
    // 所有的都被选中 全选才会选中
    return fruitList.value.every((item) => item.isChecked)
  },
  // 修改计算属性的值
  set(value) {
    // 点击全选  将所有的小框都选中 或 都不选中
    fruitList.value.forEach((item) => (item.isChecked = value))
  }
})
// 5.总价格和总数量
const total = computed(() => {
  return fruitList.value.reduce((cur, pre) => (pre.isChecked ? cur + pre.num : cur), 0)
})
const totalPrice = computed(() => {
  return fruitList.value.reduce((cur, pre) => (pre.isChecked ? cur + pre.num * pre.price : cur), 0)
})

// 6.数据持久化
// watch监听复杂数据  深度监听fruitList的变化
watch(
  () => fruitList,
  (newValue) => {
    // 将更新的列表存储到本地中  注意：这里只能存json字符串  因为监听所有的必须开启深度监听！！！ newValue.value获取！！！
    localStorage.setItem('FruitCar', JSON.stringify(newValue.value))
  },
  {
    deep: true
  }
)
</script>
<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box">
      <img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" />
    </div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 这里徐奥判断购物车列表是否为空 为空则显示空车，不为空则显示列表 v-if="fruitList.length 结合 v-else-->
    <!-- 购物车主体 -->
    <div class="main" v-if="fruitList.length">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div
            class="tr"
            :class="{ active: item.isChecked }"
            v-for="item in fruitList"
            :key="item.id"
          >
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td">
              <img :src="item.icon" alt="" />
            </div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease" :disabled="item.num <= 0" @click="sub(item.id)">-</button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="add(item.id)">+</button>
              </div>
            </div>
            <div class="td">{{ item.price * item.num }}</div>
            <div class="td"><button @click="del(item.id)">删除</button></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input v-model="checkAll" type="checkbox" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box"
            >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span
          >
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ total }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div class="empty" v-else>🛒空空如也</div>
  </div>
</template>

<style scoped>
@import './style/inputnumber.css';
@import './style/index.css';
</style>